<template>
  <x-popup
    :show="show"
    :has-confirm="multi"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <view
      class="x-flexp-column"
      :style="{height}"
    >
      <!-- #ifndef XT_PC -->
      <view class="x-pt-lg x-pl x-pr x-pb x-fs-lg x-flex-none">
        {{ title }}
      </view>
      <!-- #endif -->
      <view class="x-bt x-pl x-pr x-flex-1 x-overflow-auto">
        <view 
          v-if="hasQuery"
          class="x-pt x-pb x-flex-none x-bb x-flex-row"
          :class="queryDirection==='column'?'x-flex-column':'x-flexp-ai'"
        >
          <slot name="query" />
          <view 
            class="x-flex-none x-ml-sm"
            :class="queryDirection==='column'?'x-mt-sm':'x-ml-sm'"
          >
            <x-button
              :size="size"
              type="primary"
              @click="handleQuery"
            >
              搜索
            </x-button>
          </view>
        </view> 
        <view
          v-if="table&&!tableCard"
          class="table"
        >
          <view class="table-tr">
            <view
              v-for="(v,i) in columns"
              :key="i"
              class="table-th"
            >
              {{ v.label||v.prop }}
            </view>
            <view
              v-if="multi"
              class="table-th"
            />
          </view>
          <view
            v-for="(v,i) in data"
            :key="i"
            class="table-tr"
            :class="(!multi&&isChecked(i))||(i===currentIndex)?'x-bg-bg':''"
            @click="!multi?handleSelectionSingleChange(v):handleSelectionMobileCheckChange(i)"
          >
            <view
              v-for="(vv,ii) in columns"
              :key="ii"
              class="table-td"
              :style="{width: vv.width||'auto'}"
            >
              {{ showValue(v,vv) }}
            </view>
            <view
              v-if="multi" 
              class="table-td x-ml "
            >
              <view 
                class="x-flexp-jcai x-ra-sm"
                :class="isChecked(i)?'x-primary x-ba-primary':'x-text-light x-ba'"
                style="width: 1.5em; height: 1.5em"
              >
                <!-- #ifndef XT_PC -->
                <u-icon 
                  v-if="isChecked(i)" 
                  :color="$xm.theme.uniColorPrimary"
                  name="checkmark" 
                />
                <!-- #endif -->
                <!-- #ifdef XT_PC -->
                <i 
                  v-if="isChecked(i)" 
                  class="el-icon-check x-primary" 
                />
                <!-- #endif -->
              </view>
            </view>
          </view>
        </view>
        <view
          v-else-if="table&&tableCard"
          class=""
        >
          <view
            v-for="(v,i) in data"
            :key="i"
            class="x-flexp-row-between-center x-bb"
            :class="!multi&&isChecked(i)?'x-bg-bg':''"
            @click="!multi?handleSelectionSingleChange(v):handleSelectionMobileCheckChange(i)"
          >
            <view class="x-flex-1 table">
              <!-- <slot
                name="row"
                :data="v"
              > -->
              <view
                v-for="(vv,ii) in columns"
                :key="ii"
                class="x-flexp-row table-tr x-ba-none"
              >
                <view class="x-flex-none x-text-light table-td">
                  {{ vv.label }}：
                </view>
                <view class="x-flex-1 table-td">
                  {{ showValue(v,vv) }}
                </view>
              </view>
              <!-- </slot> -->
            </view>
            <view
              v-if="multi" 
              class="x-flex-none x-ml "
            >
              <view 
                class="x-flexp-jcai x-ra-sm"
                :class="isChecked(i)?'x-primary x-ba-primary':'x-text-light x-ba'"
                style="width: 1.5em; height: 1.5em"
              >
                <!-- #ifndef XT_PC -->
                <u-icon 
                  v-if="isChecked(i)" 
                  :color="$xm.theme.uniColorPrimary"
                  name="checkmark" 
                />
                <!-- #endif -->
                <!-- #ifdef XT_PC -->
                <i 
                  v-if="isChecked(i)" 
                  class="el-icon-check x-primary" 
                />
                <!-- #endif -->
              </view>
            </view>
          </view>
        </view>
        
        <view
          v-if="pagination"
          class="x-mt-sm x-flexp-ai x-flex-jc-end"
        >
          <!-- #ifndef XT_PC -->
          <text class="x-text-light">
            当前页：
          </text>
          <view 
            v-if="current>1"
            class="x-pa"
            @click="handleQuery(current-1, true)"
          >
            <u-icon name="arrow-left" />
          </view>
          <text>{{ current }}/{{ Math.ceil(total/pageSize) }}</text>
          <view 
            v-if="current<Math.ceil(total/pageSize)"
            class="x-pa"
            @click="handleQuery(current+1, true)"
          >
            <u-icon name="arrow-right" />
          </view>
          <!-- #endif -->
          <!-- #ifdef XT_PC -->
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="current"
            :total="total"
            :page-size="pageSize"
            @current-change="handleQuery($event, true)"
          />
          <!-- #endif -->
        </view>
      </view>

      <view class="x-flex-none x-pl x-pr">
        <slot
          name="info"
          :result="result"
          :resultName="resultName"
        >
          <div 
            v-if="multi" 
            class="x-flexp-ai x-flex-wrap x-bt"
          >
            <text class="x-pa-sm">
              已选({{ resultName&&resultName.length||0 }})
            </text>
            <!-- #ifndef XT_PC -->
            <view 
              class="x-pl-sm x-pr-sm x-primary"
              @click="showResult=!showResult"
            >
              {{ showResult?'收起':'查看' }}
            </view>
            <!-- #endif -->
            <template v-if="showResult">
              <view 
                v-for="(v,i) in resultName"
                :key="i"
                class="x-flex-none x-ml-sm x-flexp-ai x-ba x-ra-sm x-mt-sm"
                @click="handleremoveItem(i)"
              >
                <view class="x-pl">
                  {{ v }}
                </view>
                <view class="x-ml-sm x-pa">
                  <!-- #ifdef XT_PC -->
                  <i class="el-icon-close" />
                  <!-- #endif -->
                  <!-- #ifndef XT_PC -->
                  <u-icon name="close-circle" />
                  <!-- #endif -->
                </view>
              </view>
            </template>
          </div>
        </slot>
      </view>
    </view>
  </x-popup>
</template>

<script>
  export default {
    props: {
      size: {
        type: String,
        default: 'small'
      },
      title: {
        type: String,
        default: '请选择'
      },
      show: {
        type: Boolean,
        default: false
      },
      table: {
        type: Boolean,
        default: false
      },
      tableCard: {
        type: Boolean,
        default: false
      },
      multi: {
        type: Boolean,
        default: false
      },
      columns: {
        type: Array,
        default: ()=>([])
      },
      data: {
        type: Array,
        default: ()=>([])
      },
      valueKey: {
        type: [String, Function],
        default: 'id'
      },
      values: { // 回显的id
        type: Array,
        default: ()=>([])
      },
      nameKey: {
        type: [String, Function],
        default: 'name'
      },
      names: { // 回显的名字
        type: Array,
        default: ()=>([])
      },
      datas: { // 回显的data
        type: Array,
        default: ()=>([])
      },
      pagination: {
        type: Boolean,
        default: false
      },
      current: {
        type: Number,
        default: 1
      },
      total: {
        type: Number,
        default: 1
      },
      pageSize: {
        type: Number,
        default: 10
      },
      loadmore: {
        type: String,
        default: 'loadmore'
      },
      height: {
        type: String,
        default: 'auto'
      },
      hasQuery: {
        type: Boolean,
        default: true
      },
      queryDirection: {
        type: String,
        default: 'row'
      },
      hasQueryBtn: {
        type: Boolean,
        default: true
      },
      hasQueryExpend: {
        type: Boolean,
        default: true
      },
      multiConfirmWithData: {
        type: Boolean,
        default: false
      },
      currentIndex: {
        type: Number,
        default: -1,
      }
    },
    data() {
      let showResult = true
      // #ifndef XT_PC
      showResult = false
      // #endif

      return {
        tableKey: 1,
        theme: this.$x.theme,
        result: [],
        resultName: [],
        resultData: [],
        queryExpand: true,
        listTableSelection: [],
        showResult,
      }
    },
    computed: {
      isChecked() {
        return i=>{
          let v = this.data[i]
          return this.result.find(vv=>vv===v[this.valueKey])
        }
      },
      showValue() {
        return (row, column)=>{
          // if(column.options) {
          //   debugger
          // }
          if(!column) {
            return ''
          }else if(column.options) {
            let ret = row[column.prop]
            let one = column.options.find(v=>v.value===ret)
            return (one?one.label:ret)||''
          }else {
            return row[column.prop]||''
          }
        }
      }
    },
    watch:{
      show(val) {
        if(val===true) {
          this.tableKey++
          this.result = [...(this.values||[])]
          this.resultName = [...(this.names||[])]
          if(this.multiConfirmWithData) this.resultData = [...(this.datas||[])]
        }
      },
    },
    methods: {
      handleSelectionSingleChange(v) {
        if(this.multi) return
        this.$emit('confirm', v)
      },
      handleSelectionMobileCheckChange(i) {
        let p = this.data[i]
        let checked = this.isChecked(i)
        if(!checked){
          this.result.push(p[this.valueKey])
          this.resultName.push(p[this.nameKey])
          if(this.multiConfirmWithData) this.resultData.push(p)
        }else{
          let i = this.result.findIndex(v=>v===p[this.valueKey])
          if(i>=0) {
            this.result.splice(i, 1)

            i = this.resultName.findIndex(v=>v===p[this.nameKey])
            if(i>=0) this.resultName.splice(i, 1)

            if(this.multiConfirmWithData) {
              i = this.resultData.findIndex(v=>v[this.valueKey]===p[this.valueKey])
              if(i>=0) this.resultData.splice(i, 1)
            }
          }
        }
      },
      handleremoveItem(i) {
        this.result.splice(i,1)
        this.resultName.splice(i,1)
        if(this.multiConfirmWithData) this.resultData.splice(i,1)
      },
      handleConfirm() {
        // let withData = this.multiConfirmWithData?this.result.map(v=>{
        //   return this.data.find(vv=>vv[this.valueKey]===v)
        // }):undefined
        this.$emit('confirm', this.result, this.resultName, this.resultData)
      },
      handleClose() {
        this.$emit('close')
      },
      handleQuery(index) {
        this.$emit('query', index)
      },
      showResultName() {
        this.$x.notify.showModal({content: this.resultName.join('，'), showCancel: false})
      }
    },
  }
</script>

<style lang="scss" scoped>
.x-ba {
  // #ifdef XT_PC
  border-color: #cbcbcb !important
  // #endif
}
</style>
